<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>地震</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!--<meta name="viewport"content="width=320,maximum-scale=1.3,user-scalable=no">-->
		<!-- 最新cesium版本   1.37     核心js-->
		<script src="Build/Cesium/Cesium.js"></script>
		<script src="plugin/public.js"></script>
		<script src="js/csm/WMTSImageryProvider.js"></script>
		<script src="js/csm/wtms.js"></script>
		<link rel="stylesheet" type="text/css" href="css/uiBase.css" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/bootstrap.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/sweetalert.css" />
		<script src="js/mui.min.js"></script>
		<script src="core/n2.js"></script>
		<script src="./core/scopedef.js"></script>
		<script src="plugin/main.js"></script>
		<style type="text/css">
			/*  cesium   核心样式文件*/
			
			@import url("Build/Cesium/Widgets/widgets.css");
			#cesiumContainer {
				width: 100%;
				height: 100%;
			}
			
			@media (min-device-width: 375px)and(max-device-width: 667px)and(-webkit-min-device-pixel-ratio: 2) {
				/*iphone6*/
				#cesiumContainer {
					width: 375px;
					height: 667px;
				}
			}
			
			@media (min-device-width: 414px)and(max-device-width: 736px)and(-webkit-min-device-pixel-ratio: 3) {
				/*iphone6plus*/
				#cesiumContainer {
					width: 414px;
					height: 736px;
				}
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/dizhen.css" />
	</head>

	<body>
		<!--侧滑菜单容器-->
		<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
			<!--菜单部分-->
			<aside id="offCanvasSide" class="mui-off-canvas-left" style="background: white;width: 100%;">
				<div id="offCanvasSideScroll" class="mui-scroll-wrapper zuocehua">
					<div class="mui-scroll">
						<header class="mui-bar mui-bar-nav fanhui" style="background: white;">
							<a class=" mui-icon mui-icon-left-nav mui-pull-left" id="tuichu"></a>
							<h1 class="mui-title" style="color: black;">灾害列表</h1>
						</header>
						<div class="xuanzei">
							<div class="mui-row" style="background: white;">
								<div class="mui-col-sm-3 mui-col-xs-3">
									<li>
										<select name="cd-dropdown" class="cd-select" id="cd-dropdown">
											<option selected value="地震" class="icon-monkey">地震</option>
										</select>
									</li>
								</div>
								<div class="mui-col-sm-9 mui-col-xs-9">
									<li class="mui-table-view-cell">
										<form action="/example/html5/demo_form.asp" method="get" style="margin-top: 10px;">
											时间▼<input type="date" user_month id="asidedate" />
										</form>
										<span class="mui-icon mui-icon-search mui-pull-right" id="filterclick"></span>
									</li>
								</div>
							</div>
						</div>
						<div class="dizhenxinxi" style="clear: both;">
							<p>正在请求数据。。。</p>
							<p>如长时间未显示数据，请<span id="refresh" style="color: blue;"> 刷新 </span></p>
						</div>
					</div>
				</div>
			</aside>
			<aside id="offCanvasSide02" class="mui-off-canvas-right youcehua" style="background: white;">
				<div id="offCanvasSideScroll1" class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<header class="mui-bar mui-bar-nav fanhui02">
							<a class="mui-icon mui-icon-left-nav mui-pull-left" id="tuichu02"></a>
							<h1 class="mui-title">图层列表</h1>
						</header>
						<div style="margin-top:60px;" class="jindutiao">
							<div class="mui-input-row mui-input-range wmstuceng">
								<header style="">
									<span><img src="images/Artboard2Copy.png" class="img-responsive toggle"></span>
									<span class="mui-icon mui-icon-bars mui-pull-right" style="margin-top: -28px;"></span>
									<label>市界</label>
									<input type="range" min="0" max="100" id="rangeCity" class="range1" value="100" style="margin-right:24px">
								</header>
							</div>
							<div class="mui-input-row mui-input-range wmstuceng">
								<header style="">
									<span><img src="images/Artboard2Copy.png" class="img-responsive toggle"></span>
									<span class="mui-icon mui-icon-bars mui-pull-right" style="margin-top: -28px;"></span>
									<label>省界</label>
									<input type="range" min="0" max="100" id="rangePro" class="range1" value="100" style="margin-right:24px">
								</header>
							</div>
							<div class="mui-input-row mui-input-range wmstuceng">
								<header style="">
									<span><img src="images/Artboard2Copy.png" class="img-responsive toggle"></span>
									<span class="mui-icon mui-icon-bars mui-pull-right" style="margin-top: -28px;"></span>
									<label>国界</label>
									<input type="range" min="0" max="100" id="rangeCountry" class="range1" value="100" style="margin-right:24px">
								</header>
							</div>
							<div class="mui-input-row mui-input-range wmstuceng">
								<header style="">
									<span><img src="images/Artboard2Copy.png" class="img-responsive toggle"></span>
									<span class="mui-icon mui-icon-bars mui-pull-right" style="margin-top: -28px;"></span>
									<label>全球国界</label>
									<input type="range" min="0" max="100" id="rangeAllCountry" class="range1" value="100" style="margin-right:24px">
								</header>
							</div>
						</div>
					</div>
				</div>
			</aside>
			<!-- 主界面 -->
			<div class="mui-inner-wrap">
				<img src="images/northSea.png" id="map" style="" />
				<div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper">
					<header class="mui-bar mui-bar-nav dz_heard" style="position: relative;" id="headerBox">
						<a class="mui-pull-right" id="offCanvasBtn02" href="#offCanvasSide">
							<img src="images/menu@1.5x.png" />
						</a>
						<a class=" mui-pull-left" id="dizhen_home">
							<img src="images/home@1.5x.png" />
						</a>
						<span style="">
							<img src="images/search@1.5x.png"/>
							<input id="searchInp" type="text" style=""/>
							<span id="claerVal" class="disnone"></span>
						</span>
					</header>
					<div class="mui-scroll-wrapper">
						<div id="cesiumContainer">
						</div>
						<ul class="kongzhiliebiao">
							<li>
								<a id="offCanvasBtn" href="#offCanvasSide02"><img src="images/a.png" class="img-responsive"></a>
							</li>
							<li id="btnTDS"><span class=""></span></li>
							<li id="liebiaotu"><img src="images/c.png" class="img-responsive"></li>
							<li id="re"><img src="images/d.png" class="img-responsive"></li>
							<li id="IMG" style="">
								<img src="images/tuli.png" class="img-responsive">
								<div id="totalDegree">
									<p><span class="span">0</span> 次</p>
									<p><span class="span">0</span> 次</p>
									<p><span class="span">0</span> 次</p>
									<p><span class="span">0</span> 次</p>
								</div>
							</li>
						</ul>
					</div>
					<!--<div>
                <div class="mui-scroll">
                    <div>
                    </div>
                </div>
            </div>-->
					<!-- 这个东西不能删，利用他还原界面 -->
					<div class="mui-off-canvas-backdrop"></div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/sweetalert.min.js"></script>
		<script type="text/javascript">
			//加载球及其功能
			new n2.main().dizheng();
			mui.init({
				swipeBack: false,
				gestureConfig: { //管理屏幕交互
					tap: true, //默认为true
					doubletap: true, //默认为false
					longtap: true, //默认为false
					swipe: true, //默认为true
					drag: true //默认为true
				},
				/*preloadPages: [{ //预加载
				        url: 'dizhenzaihaizhuanti.html',
				        id: 'dizhenzaihaizhuanti'
				    },
				    { //预加载
				        url: 'index.html',
				        id: 'index'
				    }
				]*/
			});
			mui.plusReady(function() {
				var wvs = plus.webview.all();
				for(var i = 0; i < wvs.length; i++) {
					if(wvs[i].id == 'dizhenzaihaizhuanti.html') {
						plus.webview.close(wvs[i]);
					}
					console.log('webview' + i + ': ' + wvs[i].getURL());
					console.log('webview' + i + ': ' + wvs[i].id);
				}
				//调到index页面
				document.getElementById("dizhen_home").addEventListener('tap', function(event) {
					// 获取所有Webview窗口
					var wvs = plus.webview.all();
					var index_id = plus.webview.getLaunchWebview().id;
					for(var i = 0; i < wvs.length; i++) {
						console.log('webview' + i + ': ' + wvs[i].getURL());
						console.log('webview' + i + ': ' + wvs[i].id);
						if(wvs[i].id != index_id) {
							plus.webview.close(wvs[i]);
						}
					}
					plus.webview.getLaunchWebview().show();
				}, false);
			});
			//支持区域滚动，需要添加.mui-scroll-wrapper
			mui('#offCanvasSideScroll').scroll();
			mui('#offCanvasContentScroll').scroll();
			//点击显示图片
			mui('.kongzhiliebiao').on("tap", "#liebiaotu", function() {
				$('#IMG').toggle();
			});

			//退出选择侧滑
			mui(".fanhui").on("tap", "#tuichu", function() {
				mui('.mui-off-canvas-wrap').offCanvas('close');
			});
			//退出选择侧滑02
			mui(".fanhui02").on("tap", "#tuichu02", function() {
				mui('.mui-off-canvas-wrap').offCanvas('close');
			});

			function getVal() {
				var rangeObj = mui('#range1');
				mui.toast(rangeObj[0].value);
			}

			var csm = document.querySelector('#cesiumContainer');
			csm.addEventListener('touchstart', function(event) {
				startX = event.touches[0].clientX;
				var width = csm.clientWidth;
				var viewer = n2.viewer;
				var scene = viewer.scene;
				//侧边滑动出现侧边栏的范围
				var max = 50;

				var offCanvasWrapper = mui('#offCanvasWrapper');
				//主界面容器
				var offCanvasInner = offCanvasWrapper[0].querySelector('.mui-inner-wrap');
				offCanvasInner.addEventListener('drag', function(event) {
					if(startX < max) {
						//决定球是否可控制转动      false则不可控制，不能转动       true可以转动，可以控制
						viewer.scene._screenSpaceCameraController.enableRotate = false;

					} else if(startX < width && startX > (width - max)) {
						//决定球是否可控制转动      false则不可控制，不能转动       true可以转动，可以控制
						viewer.scene._screenSpaceCameraController.enableRotate = false;
					} else {
						viewer.scene._screenSpaceCameraController.enableRotate = true;
						event.stopPropagation();
					}
				});
			})
		</script>
	</body>

</html>